<template>
  <el-card style="padding: 10px">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-button class="editButton" @click="addUnitVisible"
          >添加单位</el-button
        >
      </el-col>
    </el-row>

    <div style="margin-top: 15px">
      <el-table
        v-loading="loading"
        :data="pageData"
        fit
        highlight-current-row
        current-row-key
        stripe
        border
        style="width: 100%"
        :row-style="{ height: '80px' }"
      >
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="单位姓名"> </el-table-column>
        <el-table-column label="单位权限" align="center" width="180">
          <template slot-scope="scope">
            <el-tag class="good">{{ scope.row.role }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间"></el-table-column>
        <el-table-column prop="gmtModified" label="更新时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              class="browserButton"
              icon="el-icon-setting"
              size="mini"
              @click="getUnitById(scope.row)"
              >编辑</el-button
            >
            <el-button
              class="deleteButton"
              icon="el-icon-delete"
              size="mini"
              @click="removeUnit(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block" style="margin-top: 15px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="更新单位"
      :visible.sync="editVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <el-form label-position="left" label-width="80px" :model="unit">
          <el-form-item label="单位名称">
            <el-input v-model="unit.name"></el-input>
          </el-form-item>
          <el-form-item label="单位角色">
            <el-select v-model="unit.role" placeholder="请选择权限">
              <el-option
                v-for="item in roleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="unit.gmtCreate" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input v-model="unit.gmtModified" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="deleteButton" @click="editVisible = false"
          >取 消</el-button
        >
        <el-button class="browserButton" @click="closeEditDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-drawer
      title="添加单位"
      :visible.sync="addVisible"
      direction="rtl"
      :before-close="handleClose"
    >
      <div style="padding: 50px">
        <el-form label-position="left" label-width="80px" :model="saveUnitData">
          <el-form-item label="单位名">
            <el-input v-model="saveUnitData.name"></el-input>
          </el-form-item>
          <el-form-item label="单位角色">
            <el-select v-model="saveUnitData.role" placeholder="请选择权限">
              <el-option
                v-for="item in roleList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span>
        <el-button class="browserButton" @click="saveUnit">添加</el-button>
        <el-button class="deleteButton" @click="closeAddDialog">关闭</el-button>
      </span>
    </el-drawer>
  </el-card>
</template>

<script>
import {
  pageUnit,
  getAllUnit,
  getUnitById,
  saveUnit,
  deleteUnitById,
  updateUnit,
} from "@/api/unit";

export default {
  data() {
    return {
      pageData: null,
      total: null,
      addVisible: false,
      queryInfo: { key: null },
      unit: { name: "", role: "", gmtModified: "", gmtCreate: "" },
      editVisible: false,
      currentPage: 1,
      size: 10,
      loading: true,
      saveUnitData: { name: "", role: "" },
      roleList: [{
          value: 'admin',
          label: 'admin'
        }, {
          value: 'editor',
          label: 'editor'
        }, {
          value: 'browser',
          label: 'browser'
        }],
    };
  },
  created() {
    this.getPageUnit(1, 10);
  },
  watch: {},
  methods: {
    getPageUnit(current, limit) {
      if (current < 1) {
        return;
      }
      pageUnit(current, limit).then((res) => {
        this.pageData = res.data.list;
        this.total = res.data.total;
        if (res.data.list.length === 0)
          this.getPageUnit(--this.currentPage, this.size);
        this.loading = false;
      });
    },
    getUnitById(row) {
      getUnitById(row.id).then((res) => {
        console.log(res);
        this.unit = res.data.unit;
        console.log(this.unit);
        this.editVisible = true;
      });
    },
    getTheseInfo() {
      return 1;
    },

    editUnit(row) {
      console.log(row.id);
    },

    removeUnit(row) {
      this.$confirm("此操作将永久删除该单位, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUnitById(row.id).then((res) => {
            this.getPageUnit(this.currentPage, this.size);
            console.log(res);
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.$refs.unit.resetFields();
          this.saveUnitData = { name: "", role: "" };
        })
        .catch((_) => {});
    },

    closeEditDialog() {
      this.editVisible = false;
      let postUnit = this.unit;
      this.updateUnitById(postUnit);
    },

    updateUnitById({ id, name, role } = {}) {
      let postUnit = { id, name, role };
      updateUnit(postUnit)
        .then((res) => {
          this.getPageUnit(this.currentPage, this.size);
          console.log(res);
        })
        .catch((res) => {
          console.log(res);
        });
    },

    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getPageUnit(newPage, this.size);
    },
    handleSizeChange(newSize) {
      this.size = newSize;
      this.getPageUnit(this.currentPage, newSize);
    },
    addUnitVisible() {
      this.saveUnitData = this.$options.data().saveUnitData;
      this.addVisible = true;
    },
    saveUnit() {
      saveUnit(this.saveUnitData)
        .then((res) => {
          this.getPageUnit(this.currentPage, this.size);
          console.log(res);
        })
        .catch((res) => {
          console.log(res);
        });
    },
    closeAddDialog() {
      this.addVisible = false;
      this.saveUnitData = { name: "", role: "" };
    },
  },
};
</script>

<style>
</style>